<template>
  <div class="app-container">
    <HeaderTool  @selectDate="selectDate"  @exportExcel="exportExcel"></HeaderTool>
    <!--  卡片  -->
    <el-row :gutter="20">
      <el-col  v-for="(card, index) in cardList" :key="index"
               class="hover-container"
               style="perspective: 1000px;
                 position: relative;
                 height: 150px;
                 margin-top: 20px;"
               :xs="24" :sm="12" :md="12" :lg="6">
        <!--   class="padding-top-bottom-16  front"  此处少添加一个fornt类名,可以正常保持间距        -->
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex-auto ">
          <div class="flex justify-content-space-between">
            <div class="title">{{ card.title }}</div>
            <img alt="" class="icon" :src="card.icon">
          </div>
          <div class="count">{{ card.count }} %</div>
          <div :class="card.status" class="analyze">{{ card.analyze }}</div>
        </el-card>
<!--        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex-auto back">-->
<!--          <div class="flex justify-content-space-between">-->
<!--            <div class="title">{{ card.title }}</div>-->
<!--          </div>-->
<!--          <div class="count">{{ card.count }}</div>-->
<!--        </el-card>-->
      </el-col>
    </el-row>
    <!--  两列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption0" class="charts-common"></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption1" class="charts-common"></EchartsComponent>
      </el-col>
    </el-row>

    <!--  两列图表 -->
    <el-row :gutter="20"  style="margin-top: 20px;">
       <div style="width: 100%;margin:0 10px;background-color: #FFFFFF;padding: 20px;border-radius: 10px">
         <div style="margin-bottom: 20px;font-weight: bolder;font-size: 18px;color: #333333">抗菌药物使用强度</div>
         <el-table :data="tableData"  style="width: 100%">
           <el-table-column  align="center" prop="department" label="科室" />
           <el-table-column  align="center" prop="month1" label="1月" >
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month1 }}</div>
             </template>
           </el-table-column>
           <!-- 2月 -->
           <el-table-column align="center" prop="month2" label="2月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month2 }}</div>
             </template>
           </el-table-column>
           <!-- 3月 -->
           <el-table-column align="center" prop="month3" label="3月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month3 }}</div>
             </template>
           </el-table-column>
           <!-- 4月 -->
           <el-table-column align="center" prop="month4" label="4月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month4 }}</div>
             </template>
           </el-table-column>
           <!-- 5月 -->
           <el-table-column align="center" prop="month5" label="5月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month5 }}</div>
             </template>
           </el-table-column>
           <!-- 6月 -->
           <el-table-column align="center" prop="month6" label="6月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month6 }}</div>
             </template>
           </el-table-column>
           <!-- 7月 -->
           <el-table-column align="center" prop="month7" label="7月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month7 }}</div>
             </template>
           </el-table-column>
           <!-- 8月 -->
           <el-table-column align="center" prop="month8" label="8月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month8 }}</div>
             </template>
           </el-table-column>
           <!-- 9月 -->
           <el-table-column align="center" prop="month9" label="9月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month9 }}</div>
             </template>
           </el-table-column>
           <!-- 10月 -->
           <el-table-column align="center" prop="month10" label="10月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month10 }}</div>
             </template>
           </el-table-column>
           <!-- 11月 -->
           <el-table-column align="center" prop="month11" label="11月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month11 }}</div>
             </template>
           </el-table-column>
           <!-- 12月 -->
           <el-table-column align="center" prop="month12" label="12月">
             <template #default="scope">
               <div class="cell-value">{{ scope.row.month12 }}</div>
             </template>
           </el-table-column>
         </el-table>
       </div>
    </el-row>

    <!--  两列图表 -->
    <el-row :gutter="20"  style="margin-top: 20px;" class="flex ">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" class=" flex-auto flex">
        <EchartsComponent :options="chartOption3" class="charts-common"></EchartsComponent>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" class=" flex-auto flex">
       <EchartsComponent :options="chartOption4" class="charts-common "></EchartsComponent>
    </el-col>
    </el-row>

    <!--  两列图表 -->
    <div :gutter="20" class="flex justify-content-space-between"  style="margin-top: 20px;gap: 20px;" >
      <div class="flex-auto" style="background-color: #FFFFFF;border-radius: 10px;padding: 20px">
        <div style="color: #666666;font-weight: bolder;font-size: 16px;padding-bottom: 10px">国家组织药品集中采购中标药品使用比例</div>
        <div style="font-size: 24px;font-weight: bold">92.5%</div>
        <div style="color: #666666;font-size: 14px;margin-top: 20px;">
          <div>分子：中标药品用量：为集采购销协议截止时间在本考核年度1月1日-12月31日内，并统计完整集采协议周期的中选药品用量</div>
          <div>分母：同种药品用量：统计该完整集采协议周期的同种药品中选药品和非中选的用量之和</div>
        </div>
      </div>
      <div class="flex-auto" style="background-color: #FFFFFF;border-radius: 10px;padding: 20px">
        <div style="color: #666666;font-weight: bolder;font-size: 16px;padding-bottom: 10px">国家组织药品集中采购中选药品完成比例</div>
        <div style="font-size: 24px;font-weight: bold">88.3%</div>
        <div style="color: #666666;font-size: 14px;margin-top: 20px;">
          <div>分子：中选药品采购完成品种数：集采购销协议截止时间在本考核年度1月1日-12月31日内，统计完整集采协议周期内医院完成的中选药品带量购销协议用量的品种数</div>
          <div>分母：中选药品品种总数：同期医院应完成国家组织药品集中采购的中选药品带量购销协议用量的品种数</div>
        </div>
      </div>
    </div>
    <CustomDialog v-model:analyzeDialogVisible="analyzeDialogVisible"></CustomDialog>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import HeaderTool from "@/components/HeaderTool/index.vue";
import {
  getANTDrugRatio,
  getDischargeRatio,
  getDrugAmountRatio, getDrugCompleteRatio,
  getDrugRatio, getDrugSourcingRatio,
  getRateDispenseRatio
} from "@/api/quality/medicate.js";
import DateUtils from "@/utils/utils.js";
const prescriptionBtn = ref('Month');
const leaveHosipalBtn = ref('Month');
const analyzeDialogVisible = ref(false);
// 选择历史时间
const selectDate = (time) => {
  drugRatio({starTime: time[0], endTime: time[1]});
  // drugAmountRatio({starTime: time[0], endTime: time[1]})
};
// 表格数据（保持不变）
const tableData = ref([
  { department: '内科', month1: 42.5, month2: 41.8, month3: 42.1, month4: 41.9, month5: 42.3, month6: 42.7, month7: 42.5, month8: 42.0, month9: 41.8, month10: 41.5, month11: 41.2, month12: 40.9 },
  { department: '外科', month1: 43.8, month2: 43.5, month3: 43.2, month4: 43.0, month5: 43.1, month6: 43.3, month7: 43.5, month8: 43.4, month9: 43.2, month10: 43.0, month11: 42.8, month12: 42.6 },
  { department: '儿科', month1: 44.2, month2: 43.9, month3: 43.7, month4: 43.5, month5: 43.8, month6: 44.0, month7: 44.2, month8: 44.1, month9: 43.9, month10: 43.7, month11: 43.5, month12: 43.3 },
  { department: '妇产科', month1: 43.1, month2: 42.8, month3: 42.6, month4: 42.4, month5: 42.7, month6: 42.9, month7: 43.1, month8: 43.0, month9: 42.8, month10: 42.6, month11: 42.4, month12: 42.2 },
  { department: '急诊科', month1: 42.7, month2: 42.4, month3: 42.2, month4: 42.0, month5: 42.3, month6: 42.5, month7: 42.7, month8: 42.6, month9: 42.4, month10: 42.2, month11: 42.0, month12: 41.8 },
  { department: 'ICU', month1: 41.2, month2: 40.9, month3: 40.7, month4: 40.5, month5: 40.8, month6: 41.0, month7: 41.2, month8: 41.1, month9: 40.9, month10: 40.7, month11: 40.5, month12: 40.3 },
  { department: '肿瘤科', month1: 40.5, month2: 40.2, month3: 40.0, month4: 39.8, month5: 40.1, month6: 40.3, month7: 40.5, month8: 40.4, month9: 40.2, month10: 40.0, month11: 39.8, month12: 39.6 }
])
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};
const handlePrescription = (buttonType) => {
  prescriptionBtn.value = buttonType;
  rateDispenseRatio({btnType:prescriptionBtn.value});
};
const handleLeaveHosipal = (buttonType) => {
  leaveHosipalBtn.value = buttonType;
  dischargeRatio({btnType:leaveHosipalBtn.value});
};
const cardList = ref([
  {
    title: '门诊患者基本药物人次占比',
    count: 2847,
    icon:new URL('@/assets/static/门诊患者基本药物人次.png', import.meta.url).href,
    analyze: '较昨日增长2.8 %',
    status: 'increase'
  },
  {
    title: '门诊患者基本药物使用量占比',
    count: 1500,
    icon:new URL('@/assets/static/门诊患者基本药物使用量.png', import.meta.url).href,
    analyze: '较昨日持平',
    status: 'decrease'
  },
  {
    title: '住院患者基本药物人次占比',
    count: 1500,
    icon:new URL('@/assets/static/住院患者基本药物人次.png', import.meta.url).href,
    analyze: '较昨日持平',
    status: 'increase'
  },
  {
    title: '住院患者基本药物使用量占比',
    count: 1200,
    icon:new URL('@/assets/static/住院患者基本药物使用量.png', import.meta.url).href,
    analyze: '较昨日下降1.5 %',
    status: 'decrease'
  }
]);
const chartOption0 = ref({
  title: {
    text: '点评处方占处方总数的比例',
    left: 'left',
    textStyle: {
      fontSize: 18,
      fontWeight: 'bold'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: {
      interval: 0
    }
  },
  yAxis: {
    type: 'value',

    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: '比例',
      type: 'bar',
      itemStyle: {
        color: '#b3d9f5'
      },
      data: [78, 79, 79, 80, 81, 82]
    }
  ],
  grid: {
    left: '5%',
    right: '5%',
    bottom: '0%',
    top: '20%',
    containLabel: true
  },
});
const chartOption1 = ref({
  title: {
    text: '点评出院患者医嘱比例',
    left: 'left',
    textStyle: {
      fontSize: 18,
      fontWeight: 'bold'
    }
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '0%',
    top: '20%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: {
      interval: 0
    }
  },
  yAxis: {
    type: 'value',
    max: 100,
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: '比例',
      type: 'bar',
      itemStyle: {
        color: '#00a69e'
      },
      data: [85, 86, 87, 88, 89, 90]
    }
  ]
});

const chartOption3 = ref({
  title: { text: '基本药物采购品种数占比' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  series: [
    {
      name: '基本药物采购品种数占比',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      label: {
        show: true, // 显示标签文字
        position: 'outside', // 标签位置：外部
        formatter: '{b}: ({d}%)' // 格式化标签内容
      },
      labelLine: {
        show: true, // 启用引导线
        length: 5, // 引导线长度
        length2: 5, // 第二段长度（从数据点到标签）
        smooth: true, // 是否平滑曲线
        lineStyle: {
          color: '#999',
          width: 1.5,
          type: 'solid'
        }
      },
      // 为每个数据项设置颜色
      color: ['#9ECB7F', '#5A6FC0'],
      data: [
        { value: 1048, name: '医院采购基本药品总数' },
        { value: 735, name: '医院期间采购药品总数' },

      ]
    }
  ]
});

const chartOption4 = ref({
  title: { text: '国家基本药物配备使用金额占比' },
  tooltip: {
    trigger: 'item',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross'   // 十字准星指示器
    }
  },
  series: [
    {
      name: '国家基本药物配备使用金额占比',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },

      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      label: {
        show: true, // 显示标签文字
        position: 'outside', // 标签位置：外部
        formatter: '{b}:({d}%)' // 格式化标签内容
      },
      labelLine: {
        show: true, // 启用引导线
        length: 5, // 引导线长度
        length2: 5, // 第二段长度（从数据点到标签）
        smooth: true, // 是否平滑曲线
        lineStyle: {
          color: '#999',
          width: 1.5,
          type: 'solid'
        }
      },
      // 为每个数据项设置颜色
      color: ['#9ECB7F', '#5A6FC0'],
      data: [
        { value: 1048, name: '医院配备使用基本药物总金额' },
        { value: 735, name: '全部药品配备使用总金额' },

      ]
    }
  ]
});


// 获取药物各占比信息
const drugRatio = async (params) => {
  let result = await getDrugRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
      cardList.value[0].count = data.today_DrugRatio;
      cardList.value[0].analyze = data.drugRatio > 0 ? `较昨日增长${data.drugRatio} %` : data.drugRatio < 0 ? `较昨日下降${data.drugRatio} %` : '较昨日持平';
      cardList.value[0].status = data.drugRatio > 0 ? 'increase' : data.drugRatio < 0 ? 'decrease' : 'fair';
      cardList.value[1].count = data.today_DrugTakeRatio;
      cardList.value[1].analyze = data.drugTakeRatio > 0 ? `较昨日增长${data.drugTakeRatio} %` : data.drugTakeRatio < 0 ? `较昨日下降${data.drugTakeRatio} %` : '较昨日持平';
      cardList.value[1].status = data.drugTakeRatio > 0 ? 'increase' : data.drugTakeRatio < 0 ? 'decrease' : 'fair';
      cardList.value[2].count = data.today_InpatientDrugRatio;
      cardList.value[2].analyze = data.inpatientDrugRatio > 0 ? `较昨日增长${data.inpatientDrugRatio} %` : data.inpatientDrugRatio < 0 ? `较昨日下降${data.inpatientDrugRatio} %` : '较昨日持平';
      cardList.value[2].status = data.inpatientDrugRatio > 0 ? 'increase' : data.inpatientDrugRatio < 0 ? 'decrease' : 'fair';
      cardList.value[3].count = data.today_DischargeDrugTakeRatio;
      cardList.value[3].analyze = data.dischargeDrugTakeRatio > 0 ? `较昨日增长${data.dischargeDrugTakeRatio} %` : data.dischargeDrugTakeRatio < 0 ? `较昨日下降${data.dischargeDrugTakeRatio} %` : '较昨日持平';
      cardList.value[3].status = data.dischargeDrugTakeRatio > 0 ? 'increase' : data.dischargeDrugTakeRatio < 0 ? 'decrease' : 'fair';
  }
}
// 获取点评处方总数比例
const rateDispenseRatio = async (params) => {
  let result = await getRateDispenseRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     const seriesData = [];
     const xAxis = [];
     data.forEach(item=>{
        seriesData.push(Number(item.rateDispenseRatio))
        if (prescriptionBtn.value == 'Month'){
           xAxis.push(`${item.year}年${item.month}月${item.day}日`);
        }
        if (prescriptionBtn.value == 'Quarter'){
          xAxis.push(`${item.year}年第${item.quarter}季度`);
        }
        if (prescriptionBtn.value == 'Year'){
          xAxis.push(`${item.year}年${item.month}月`);
        }
     })
    chartOption0.value.series[0].data = seriesData;
    chartOption0.value.xAxis.data = xAxis;
  }
}
// 获取出院患者遗嘱比例
const dischargeRatio = async (params) => {
  let result = await getDischargeRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const seriesData1 = [];
    const seriesData2 = [];
    const xAxis = [];
    data.forEach(item=>{
      seriesData1.push(Number(item.today_DischargeRatio))
      seriesData2.push(Number(item.dischargeRatio))
      if (leaveHosipalBtn.value == 'Month'){
        xAxis.push(`${item.year}年${item.month}月${item.day}日`);
      }
      if (leaveHosipalBtn.value == 'Quarter'){
        xAxis.push(`${item.year}年第${item.quarter}季度`);
      }
      if (leaveHosipalBtn.value == 'Year'){
         xAxis.push(`${item.year}年${item.month}月`);
      }
    })
    chartOption1.value.xAxis[0].data = xAxis;
    chartOption1.value.series[0].data = seriesData1;
    chartOption1.value.series[1].data = seriesData2;
  }
}

// 国家基本药物配备使用金额占比
const drugAmountRatio = async (params) => {
  let result = await getDrugAmountRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    console.log("data",data)
    const seriesData = [];
    const xAxis = [];
    data.forEach(item=>{
      seriesData.push(Number(item.drugAmountRatio));
      xAxis.push(item.month + "月");
    })
    chartOption4.value.xAxis.data = xAxis;
    chartOption4.value.series[0].data = seriesData;
  }
}


// 加载界面所有数据
const getAllData = (time)=>{
     drugRatio(time); // 传入时间范围
     // drugAmountRatio(time)
}

getAllData({
  starTime: DateUtils.formatDate(DateUtils.getDateByDays(-30),"yyyy-MM-dd"),
  endTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
});























</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 26px;
    font-weight: 600;
    padding: 14px 0;
  }
  .analyze {
    font-size: 16px;
  }
  .increase {
    color: #00C94F;
  }
  .decrease {
    color: #FF3643;
  }
  .fair {
    color: #8F95A1;
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }


}


.cell-value {
  background-color: #fff9c4;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
}
::v-deep(.el-table .cell){
  padding: 0px;
}
::v-deep(.el-table .el-table__cell){
  padding: 0px;
}
.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 隐藏元素背面 */
  transition: transform 0.9s ease; /* 添加过渡效果，时长 0.6 秒，缓动函数为 ease */
}
.front {
  z-index: 2;
}
.back {
  transform: rotateY(180deg); /* 初始时背面旋转 180 度隐藏 */
}
.hover-container:hover .front {
  transform: rotateY(180deg); /* 鼠标悬浮时正面旋转 180 度隐藏 */
}
.hover-container:hover .back {
  transform: rotateY(0deg); /* 鼠标悬浮时背面旋转到 0 度显示 */
}
::v-deep .charts-common .el-button {
  height: fit-content;
  padding:5px;
}

</style>
